<template>
	<view class="banner_wrapper">
		<view class="banner_bg" :style="{'background-image': `linear-gradient(${bannerBackground || '#345dc2'} 50%, #F8F9FB)`}">

		</view>
		<swiper class="swiper" @change="swiperChange" :current="current" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration"
		 indicator-color="rgba(255, 255, 255, 0.5)" indicator-active-color="#fff">
			<swiper-item v-for="(item,index) in bannerList" :key='index' class="swiper_item">
				<image :src="item.imageUrl" mode="widthFix"></image>
			</swiper-item>

		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				current: 0,
				bannerBackground: '',
			}
		},
		props: {
			bannerList: {
				type: Array,
				default: () => []
			}
		},
		methods: {
			swiperChange(e) {
				// 当前所在图的index
				this.current = e.detail.current;
				//轮播图切换修改背景色
				this.bannerBackground = this.bannerList[this.current].background;
			},
		},
		watch: {
			bannerList: {
				handler(newVal) {
					// 监听bannerList父组件有传递数据，则获取第1张图的背景色
					if (newVal && newVal.length > 0) {
						// 切换回第1张图
						this.current = 0
						// 设置第1张图的背景色
						this.bannerBackground = this.bannerList[0] && this.bannerList[0].background
					}
				},
				immediate: true
			}
		},
	}
</script>

<style lang='scss'>
	.banner_wrapper {
		width: 100%;
		position: relative;
		padding-top: 120px;

		.banner_bg {
			position: absolute;
			top: 0;
			width: 100%;
			height: 470rpx;
			/* #ifdef APP-PLUS */
			height: calc(var(--status-bar-height) + 470rpx);
			/* #endif */
			/* 过渡效果 */
			transition: .5s;
		}
	}

	.swiper {
		width: 100%;
		height: 170px;
	}

	.swiper_item {
		width: 100%;
		height: 170px;
		display: flex;
		justify-content: center;

		>image {
			width: 90%;
			height: 100%;
			border-radius: 15rpx;
		}
	}
</style>
